<template>
  <div>
    <div class="filter">
      <label>筛选请求日期区间: </label>
      <div>
        <el-date-picker
          v-model="state.dateRange"
          type="daterange"
          unlink-panels
          range-separator="到"
          start-placeholder="开始日期"
          end-placeholder="截止日期"
          :shortcuts="shortcuts"
        />
      </div>
      <div>
        <el-button type="primary" :icon="Search" @click="handleFilter"> 查询 </el-button>
        <el-button :icon="Refresh" @click="handleClear">重置</el-button>
      </div>
    </div>
    <x-table
      ref="refTable"
      name="服务日志"
      :top="47"
      :columns="columns"
      :init-sort="{ logId: 'descending' }"
      :data="tableData.resp.list"
      :total="tableData.resp.total"
      :loading="tableData.loading"
      @query="handleQuery"
    >
      <template #column-success="scope">
        <el-tag :type="`${scope.data ? 'success' : 'danger'}`">
          <span v-if="!scope.data">失败</span>
          <span v-if="scope.data">成功</span>
        </el-tag>
      </template>
    </x-table>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElTag, ElDatePicker } from 'element-plus'
import { Search, Refresh } from '@element-plus/icons-vue'
import dayjs from 'dayjs'
import { logApi } from '@/api/modules/log/log'

const refTable = ref()
const tableData = reactive({ resp: { list: [], total: 0 }, loading: false })
const handleQuery = (page: AxiosType.Pagination) => {
  tableData.loading = true
  const params = {} as any
  if (state.dateRange[0] != '') {
    params.queryBeginTime = dayjs(state.dateRange[0]).format('YYYY-MM-DD') + ' 00:00:00'
  }
  if (state.dateRange[1] != '') {
    params.queryEndTime = dayjs(state.dateRange[1]).format('YYYY-MM-DD') + ' 23:59:59'
  }
  logApi.findApiListPage(page, params).then(resp => {
    if (resp.success) {
      tableData.resp = resp.data
    }
    tableData.loading = false
  })
}

const status = [
  { text: '成功', value: 1 },
  { text: '失败', value: 0 }
]
const columns = [
  { prop: 'loginName', label: '登录账号', width: 120, sortable: false },
  { prop: 'userCode', label: '用户编号', width: 120, sortable: false },
  { prop: 'userName', label: '用户姓名', width: 120, sortable: false },
  { prop: 'methodName', label: '请求方法', width: 160, isGbk: true, sortable: false },
  { prop: 'success', label: '状态', width: 160, sortable: false, filters: status },
  { prop: 'errMsg', label: '错误信息', width: 160, sortable: false },
  { prop: 'beginTime', label: '请求时间', width: 160, sortable: false, search: '' },
  { prop: 'accessSource', label: '访问来源', width: 120, sortable: false },
  { prop: 'ip', label: '访问IP', width: 150, sortable: false },
  { prop: 'location', label: '访问地址', width: 200, sortable: false },
  { prop: 'os', label: '操作系统', width: 150, sortable: false },
  { prop: 'browser', label: '浏览器', width: 100, sortable: false }
]

const state = reactive({ dateRange: [] as any[] })

const shortcuts = [
  {
    text: '今天',
    value: () => {
      return [new Date(), new Date()]
    }
  },
  {
    text: '近7天',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    }
  }
]

const handleFilter = () => {
  refTable.value.refresh()
}
const handleClear = () => {
  state.dateRange = ['', '']
  refTable.value.refresh()
}
</script>

<style lang="scss" scoped>
.filter {
  padding: 0 10px 15px 0;
  display: flex;
  align-items: center;
  label {
    font-weight: bold;
    color: $--color-text-secondary;
  }
  & > div,
  label {
    padding-right: 10px;
  }
}
</style>
